<template>
  <div class="replyComponent">
    <el-card>
      <div slot="header">
        <span class="title">评论</span>
        <el-button class="btn" type="text">清空所有消息</el-button>
      </div>
      <div class="content" v-for="replyItem of replayList" :key="replyItem.id">
        <el-row>
          <el-col :span="2">
            <img src="../assets/header.webp" />
          </el-col>
          <el-col :span="19">
            <div>
              {{ replyItem.author }}
              <span class="reply-sys">评论了你的博文</span>
            </div>
            <div class="item-marg reply-info">
              {{ replyItem.replyInfo }}
            </div>
            <div class="reply-title">{{ replyItem.replyTitle }}</div>
          </el-col>
          <el-col :span="3" class="exc">
            <div><i class="el-icon-delete"></i></div>
            <div class="item-marg">{{ replyItem.replyTime }}</div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="20"
        :hide-on-single-page="true"
      />
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      replayList: "", // 评论列表
    };
  },
  methods: {
    loadReplyMessageContent() {
      fetch("reply-msg-content.json")
        .then((resp) => resp.json())
        .then((data) => (this.replayList = data));
    },
  },
  mounted() {
    this.loadReplyMessageContent();
  },
};
</script>
<style scoped>
.replyComponent .title {
  font-size: 18px;
  font-weight: bold;
}
.replyComponent .btn {
  float: right;
  padding: 3px 0;
}
.content {
  font-size: 14px;
}
.content img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.content .item-marg {
  margin: 10px 0 15px 0;
}
.content .content .exc {
  text-align: right;
  color: #666;
}
.content .reply-sys {
  color: #999;
  margin-left: 10px;
}
.reply-info {
  font-weight: bold;
}
.reply-title {
  color: #666;
}
.el-pagination {
  text-align: center;
}
</style>